<template>
  <view class="pa-24">
    <view v-for="(item, index) in treeNodeData" :key="index">
      <expandedNode
        :followTheme="props.followTheme"
        :fieldNames="props.fieldNames"
        :data="item"
        ref="expandedNodeRef"
        @text-click="emits('textClick', $event)"
      >
        <treeNode
          @text-click="textClick($event, item)"
          :followTheme="props.followTheme"
          :fieldNames="props.fieldNames"
          :data="item"
        ></treeNode>
      </expandedNode>
    </view>
  </view>
</template>

<script lang="ts" setup>
import treeNode from './tree-node.vue';
import expandedNode from './expanded-node.vue';
import { inject, computed, getCurrentInstance, ref } from 'vue';
const expandedNodeRef = ref<InstanceType<typeof expandedNode> | null>(null);

const emits = defineEmits(['textClick']);
const props = defineProps({
  followTheme: {
    type: [Boolean, String],
    default: true
  },
  /**
   * 数据
   * @description 生成树结构的数据。结构必须要有id字段。当然可以通过field-names来映射，如果你的唯一标识字段不是Id的话。
   */
  data: {
    type: Array,
    default: () => [],
    required: true
  },
  /**
   * 数据结构字段的映射表。
   */
  fieldNames: {
    type: Object,
    default: () => {
      return {
        id: 'id',
        text: 'text'
      };
    }
  }
});
const treeNodeData = computed(() => props.data);

function textClick(event: any, item: any) {
  emits('textClick', event);
  if (item && item['children']) {
    if (Array.isArray(expandedNodeRef.value)) {
      let el = expandedNodeRef.value.find(
        (el) => el?.filedId == item[props.fieldNames.id]
      );
      if (el) {
        el?.setStatus();
      }
    } else {
      expandedNodeRef.value?.setStatus();
    }
  }
}
</script>
